<template>
  <div class="box">
    <h3 v-for="(item , index) in arr" :key="index" @click="change(index)" :class=" index == num ? 'change' : ''">{{item}}</h3>
  </div>
</template>

<script>
export default {
    data(){
      return {
        arr:['首页' , '订单' , '我的'],
        num:null
      }
    },
    methods:{
      change(index){
        this.num == index ? this.num = null : this.num = index
      }
    }
}
</script>

<style scoped>
    .box{
        height: 57px;
        display: flex;
        justify-content: space-around;
    }
    h3{
        line-height: 57px;
        width: 100px;
        text-align: center;
    }
    .change{
      color: rgb(45, 189, 233);
    }
</style>